<script>
import { mapState } from "vuex";

export default {
  name: "FileHandle",
  props: {
    render: {
      type: String,
      default: "",
    },
    fileType: {
      type: String,
      default: "",
    },
    fileValue: {
      type: String,
      default: "",
    },
    imageStyle: {
      type: Object,
      default: () => {},
    },
    thumbpath: {
      type: String,
      default: "",
    },
  },
  computed: {
    ...mapState(["qtApi"]),
    handleOpen()
    {
      window.open(this.fileValue)
    },
    currentRender() {
      if (!this.render) {
        const type = this.fileValue.split(".");
        const fileType = type[type.length - 1].toUpperCase();
        if (!fileType) return "unknown";
        if (this.thumbpath) {
          return "img";
        }
        if (["UNKNOWN"].includes(fileType)) {
          return "unknown";
        }
        if (["HEIC"].includes(fileType)) {
          return "link";
        }
        if (["JPG", "JPEG", "PNG", "BMP", "GIF", "WEBP"].includes(fileType)) {
          return "img";
        }
        if (
          ["AMR", "MP3", "WAV", "M4A", "AAC", "AUD", "SILK"].includes(fileType)
        ) {
          return "audio";
        }
        if (["MP4", "WMV", "MOV"].includes(fileType)) {
          return "video";
        }
        return "text";
      }
      return this.render;
    },
  },
};
</script>

<template>
  <div class="fileHandle">
    <span
      v-if="currentRender === 'video'"
      class="tips-file"
      title="点击播放视频"
      @click="
        () => {
          if (this.qtApi) {
            this.qtApi.mediaPlayerFile(fileValue);
          }
        }
      "
    >
      {{ fileValue }}
    </span>
    <!--音频播放按钮-->

    <div
      v-if="currentRender === 'audio' && fileValue"
      class="tips-audio"
      title="点击播放音频"
    >
      <span
        class="btn-play"
        title="点击播放音频"
        @click="
          () => {
            if (this.qtApi) {
              this.qtApi.mediaPlayerFile(fileValue);
            }
          }
        "
      ></span>
      <span v-copy class="btn-path">{{ fileValue }}</span>
    </div>

    <ImagePreview
      v-if="currentRender === 'img' && (fileValue || thumbpath)"
      :imageStyle="{ width: imageStyle.width }"
      :src="fileValue"
      :thumbpath="thumbpath"
    ></ImagePreview>
    <!--未知 | 文字-->
    <a
      v-if="currentRender === 'unknown' || currentRender === 'text'"
      class="tips-file"
      v-copy
      :href="fileValue"
      title="点击下载文件"
      target="_blank"
    >
      {{ fileValue }}
    </a>
    <!--链接-->
    <a
      v-if="currentRender === 'link'"
      :href="fileValue"
      class="tips-file"
      title="点击下载文件"
      target="_blank"
      v-copy
    >
      {{ fileValue }}
    </a>
  </div>
</template>

<style lang="scss" scoped>
.tips {
  word-break: break-all;

  &-file {
    word-break: break-all;
    cursor: pointer;
    color: #428cad;
  }

  &-audio {
    word-break: break-all;
    vertical-align: middle;
  }
}

.btn-play {
  margin-right: 6px;
  display: inline-block;
  $icon-size: 20px;
  cursor: pointer;
  width: $icon-size;
  height: $icon-size;
  background-image: url("@/static/icon/icon_play_normal.png");
  background-position: center;
  background-size: $icon-size;
  vertical-align: middle;

  &:hover {
    background-image: url("@/static/icon/icon_play_hover.png");
  }

  &:active {
    background-image: url("@/static/icon/icon_play_press.png");
  }
}

.btn-path {
  vertical-align: middle;
}
</style>
